<template>
  <el-dialog
    title="新增信息"
    :visible="isopen"
    :append-to-body="true"
    @close="close"
    width="580px"
    @opened="openDialog"
  >
    <el-form :model="form">
      <el-form-item label="类别" :label-width="formLabelWidth">
        <el-select v-model="form.category" placeholder="请选择活动区域">
          <el-option  v-for="item in categoryOptions.item" :key="item.id" :label="item.category_name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="概况" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.content" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="danger" @click="submit" :loading="submit_button_loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { watch, reactive, ref } from "@vue/composition-api";
import { AddInfo } from "@/api/news"
export default {
  props: {
    isopen: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      default: () => []
    }
  },
  setup(props,{root,emit}) {
    const form = reactive({
      category:'',
      title:'',
      content:''
    });
    const categoryOptions = reactive({
      item:[]
    })
    const formLabelWidth = ref("70px");
    const submit_button_loading = ref(false)
    // methods
    // 对父组件传递的分类数据进行接收
    const openDialog = () => {
      categoryOptions.item = props.category
    };
    // 模态框关闭方法，触发后修改父组件isopen属性为false
    const close = () => {
      emit("update:isopen", false);
      //   this.$emit("close");
    };
    // 添加信息方法 调用添加接口
    const submit = ()=>{
      if(!form.category){
        root.$message.error('请选择分类')
        return false
      }
      if(!form.title){
        root.$message.error('请输入标题')
        return false
      }
      if(!form.content){
        root.$message.error('请输入内容')
        return false
      }
      let requestData = {
        categoryId:form.category,
        title:form.title,
        content:form.content
      }
      submit_button_loading.value = true
      AddInfo(requestData).then(response=>{
        form.category=''
        form.title=''
        form.content=''
        submit_button_loading.value = false
      }).catch(error=>{
      })
    }
    return {
      form,
      formLabelWidth,
      close,
      openDialog,
      categoryOptions,
      submit,
      submit_button_loading
    };
  }
};
</script>

<style>
</style>